<!doctype html>
<html>
<head>
    <title>Form html5</title>
</head>
<body>
    <form action="javascript:alertValues();" method="get" accept-charset="utf-8" autocomplete="on">
        <fieldset>
            <legend>Customer Info</legend>
            <p>
                <label for="">Name :
                    <input type="text" name="name" value="" placeholder="Enter your name" autofocus required size="50">
                </label>
            </p>
            <p>
                <label for="">Telephone : 
                    <input type="tel" name="" value="" placeholder="Pattern: 1-234-567-8910" required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
                </label>                
            </p>
            <p>
                <label>Email : 
                    <input type="email" name="email" placeholder="Enter your email address" required size="50">
                </label>
            </p>
            <p>
                <label>Date :
                    <input type="date" name="" value="" placeholder="">
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend>Favorite Composer</legend>
            <p>
                <label>
                    <input type="text" name="favorites" list="composers">
                    <datalist id="composers">
                        <option value="Bach"></option>}
                        <option value="Beethoven"></option>}
                        <option value="Brahms"></option>}
                        <option value="Chopin"></option>}
                        <option value="Mendelssohn"></option>}
                    </datalist>
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend>Composers</legend>
            <p>
                <label>
                    Bach : <input name="form_number" id="form_number" type="number" min="1" max="5">
                </label>
            </p>
            <p>
                <label>
                    Beethoven : <input type="number" name="form_number" value="" placeholder="" min="1" max="10">
                </label>
            </p>
            <p>
                <label>
                    Brahms : <input type="number" name="form_number" value="" min="1" max="7">
                </label>
            </p>
            <p>
                <label>
                    Chopin : <input type="number" name="form_number" value="" placeholder="" min="1" max="10">
                </label>
            </p>
            <p>
                <label>
                    Mendelssohn : <input type="number" name="form_number" value="" placeholder="" min="1" max="4">
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend>Upload file(s)</legend>
            <p>
                Upload one of your orchestra's file(s) for inclusion in our library
            </p>
            <p>
                <label><input type="file" name="" value="" placeholder="" multiple="multiple"></label>
            </p>
        </fieldset>
    </form>
</body>
</html>